*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

:root {
  --accent-color: #fff;
  --gradient-color: #FBFBFB;
  --background: beige;
  --bodybackground: #B5B5B5;
  --font: "Montserrat";
}

html,body{
  
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  flex-shrink: 0;
}





.Home{
  padding-top: 100px;
  position: relative;
  height: auto;
  width: auto;
  scroll-snap-align: start;
  bottom: 150px;
}


body{
  overflow-x: hidden;
  
  -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
            box-sizing: border-box;
  background-color: var(--bodybackground);
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 800px;
}


/* Beginning of Navbar */
.navbar {
display: flex;
justify-content: space;
align-items: center;
position: fixed;
padding: 10px 20px;
background: rgb(2,0,36);
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(255,0,0,1) 100%) no-repeat;
color: white;
top: 0;
width: 100%;
z-index: 9999999999999999999999999999;
}

.navbar .logo {
font-size: 1.5em;
font-weight: bold;
padding-right: 15px;
}
#logoImg{
cursor: pointer;
transition: all 0.3s;

}
#logoImg:hover{
  transform: scale(1.3) rotate(5deg);
}
.navbar .nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.navbar .nav-links li {
margin: 0 10px;
}

.navbar .nav-links li a {
color: white;
text-decoration: none;
font-size: 19px;
font-family: var(--font);
display: flex;
align-items: center;
}

.navbar .nav-links li a .fas {
margin-right: 8px;
}
.navbar .nav-links li a:hover{
color: red;
}
.navbar .hamburger {
display: none;
font-size: 1.5em;
cursor: pointer;

}

main{
  flex-grow: 1;
  position: relative;
  top: 250px;
 
}
.container{
  display: flex;
  flex-direction: row;
  position: relative;
  top: 30px;
  
}

.container2{
  flex: 50%;
  margin-right: 15px;
}
.mainPhoto{
  position: relative;
  height: 765px;
  
  flex:50%;
  top: -6px;
  margin-right: 15px;
  width: 10px;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  
}
.grid-container{
  position: relative;
  top: -6px;
  
  height: auto;
  
}
.grid-container .images{
  position: relative;
  top: 35px;
  left: -5px;
  display: flex;
  margin-left: 10px;
  
}
.grid-container .image{
  position: relative;
  width: auto;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  
  margin-left: 15px;

  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.grid-container .image:hover{
  transform: scale(1.5);
  z-index: 9999999;
}

.intro-desc{
  text-align: center;
  background:white;
  font-size: 20px;
  margin-left: 20px;
  height:330px;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
}
.column1{
  position: relative;
  /* box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;*/

  height: auto;
  flex: 50%;
  
  
}
.column2{
  height: auto;
  flex: 50%;
  left: 4px;
}
.images .image{
  width: 400px;
  height: 400px;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.images .image:hover{
  transform: scale(1.5);
  z-index: 999999;
}



/* Beginning of location section */

.Location{
  position: relative;
  height: auto;
  width: auto;
  margin-top: 400px;
  bottom: 500px;
  padding-top: 150px;
}

.desktopmap{
  
  position: relative;
  margin-left: 15px;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
}

.mainLocationContainer{
  display:flex;

}
.mapContainer{
  flex: 50%;
}
.aboutUsContainer{
  
  flex: 50%;
  margin-right: 15px;
  
}
.aboutUs{
  background-color: white;
  display: inline-block;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  height: auto;
  
}

.aboutusContainer2{
  margin-top: 25px;
  background-color: white;
  display: flex;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  height: 75px;
  text-align: center;
}

.socialIconsContainer{
  flex: 50%;
  position: relative;
  top: 20px;
}
.socialDetailsContainer{
  flex: 50%;
  position: relative;
  
}
.locationIcon{
  position: relative;
  scale: 3;
  top: 5px;
  
  color: black;
}
.locationIcon:hover{
  color: red;
}

.facebookIcon{
  position: relative;
  right: 50px;
}
.instragramIcon{
  position: relative;
  left: 50px;

}
.desctime{
  display: flex;
  flex-direction: row;
}

.openingTimes{
  text-align: center;
  height: auto;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  background: white;
  margin-right: 25px;
  width: 425px;
}

.address{
  width: 250px;
  font-size: 19px;
}

/* End of Location Section */

/* Beginning of Service section */

.servicesContainer{
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  
  padding-top: 150px;
  bottom: 500px;
  width: px;
}
.contact-form{
  display: flex;
  flex: 50%;
  flex-direction: column;
  font-size: 28.8px;
}
.UserInputDetails{
  background-color: white;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  flex: 50%;
  display: flex;
  margin-left: 20px;
  width: 900px;
  
}
.userMessage{
  position: relative;
  background-color: white;
  box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  flex: 50%;
  margin-top: 10px;
  left: 20px;
  height: 500px;
  width: 900px;
  justify-content: center;
}
.message{
  width: 700px;
  height: 400px;
  resize: none;
  font-size: 28.8px;
  margin-left:95px;
}
.nameEmail{
  flex: 50%;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.serviceDate{
  flex: 50%;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.titleMessage{
  margin-left: 400px;
}

.counter{
  margin-left: 400px;
}

.serviceImages{
  position: relative;
  display: flex;
  text-align: center;
  left: 29px
  
}

.serviceImages .imageDesc{
  background: white;
  
  display: block;
}

.serviceImages .serviceImage{
  position: relative;
  width: 273px;
  height: 190px;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.serviceImages .serviceImage:hover{
  transform: scale(2.5);
  z-index: 9999999999999;
  border: black solid 2px;
}
.serviceImages .serviceImage img{
  width: 273px;
  height: 2px;
}

.serviceimageFlex1{
  flex: 50%
}

.serviceimageFlex2{
  flex: 50%;
}
.imageContainer{
  display: block;
  box-shadow: 5px 4px 0 2px  #C20D0D, 6px 5px 5px 4px black;
  top: 100px;
  width: 273px;
}
.imagecontainer2{
  position: relative;
  top: 25px
}
.submitButton{
  position: relative;
  float: right;
  left: 939px;
  bottom: 80px;
  width: 910px;
  height: 80px;
  background-color: white;
  box-shadow: 5px 4px 0 2px  #C20D0D, 6px 5px 2px 4px black;
  border: none;
  color: black;
  cursor: pointer;
  text-align: center;
  z-index:1000;
  font-size: 25px;
}
.submitButton:hover{
  background-color: lightgrey;
}
.socialsemail{
  font-size: 25px;
  color: black;
}
.socialsemail:hover{
  color:red;
}


/* End of Service section */

/* Beginning of Footer */

.footer-container{
  position: relative;
  bottom:0;
  text-align: center;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(255,0,0,1) 100%);
  width: auto;
  
  
  
  z-index: 1000!important;
  
}

.socials-container{
  font-size: 35px;
}
.socials-container a{
  color: white;
}
.links-container a{
  color: white;
  
}
.socials-container a:hover{
  color: #C20D0D;
}
.links-container a:hover{
  color: #C20D0D;
}
.copyrightText{
  color: white;
}

/* End of Footer */
@media(max-width: 1920px) {
  .mobilemap{
    display: none;

  }
}
@media (min-width: 2560px) and (max-width: 2560px){
  .grid-container .images{
    position: relative;
    top: 139px;
  }

}
@media screen and (max-width: 768px){
    .navbar .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      position: absolute;
      
      top: 100px;
      left: 0;
      background: rgb(2,0,36);
      background: rgb(2,0,36);
      background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(255,0,0,1) 100%);
  }

  .navbar .nav-links.active {
      display: flex;
  }

  .navbar .hamburger {
      display: block;
      position: fixed;
      
      left: 375px;
  }

  .image, .desktopmap, .serviceImages, #aboutUs, .aboutUsText{
    display:none;
  }
  
  
  .Location{
    position: relative;
    height: auto;
    width: auto;
    margin-top: 400px;
    bottom: 200px;
  }
  
 
  body{
    position: relative;
    right: 3px;
    overflow-x: hidden;
  
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
              box-sizing: border-box;
    background-color: var(--bodybackground);
    font-size: 19px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

  }

  

  
  /* for Mobile Element positioning */
  .locationBtn1{
    position: absolute;
    scale: 150%;
    left: 25px
    
  }
  .serviceBtn1{
    position: absolute;
    scale: 150%;
    left: 50px;
    
    

  }
  .shopBtn1{
    position: absolute;
    scale: 150%;
    left: 275px;
    
  }
  .contactBtn1{
    position: absolute;
    scale: 190%;
    left: 150px;
    top: 10px;
   
  }
  #navbarButton:hover {
    color: #C20D0D;
   
  }
 
  .container{
    
    flex-direction: column;
    position: relative;
    top: 30px;
    margin-right: 15px;
    
  }
  .container2{
    
    margin-right: 15px;
  }
  
  .mainPhoto{
    height: 400px;
    width: 400px;
    position: absolute;
    
    bottom: 600px;
    
    left: 15px;
    box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  }
  .grid-container{
    position: relative;
    top: -6px;
    height: auto;
    
    
  }


  .intro-desc{
    position: relative;
    background:white;
    width: 400px;
    font-size: 18px;
    top: 430px;
    box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
    height: 500px;
    left: -4px;
  }

  .footer-container{
    text-align: center;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(255,0,0,1) 100%);
    height: 100%;
  
    overflow: auto;
  }
  
  .servicesContainer{
    top: -90px;
  }
  
  .mobilemap{
    display:block;
    position: relative;
    top: 60px;
    left: 16px;
    box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
  }
  
  .socials-container{
    font-size: 35px;
    color: white;
  }
  .socials-container a{
    color: white;
  }
  .links-container a{
    color: white;
  }
  .socials-container a:hover{
    color: #C20D0D;
  }
  .links-container a:hover{
    color: #C20D0D;
  }
  .copyrightText{
    color: white;
  }
  .mainLocationContainer{
    
    display:flex;
    flex-direction: column;
  
  }
  
  .aboutUsContainer{
    position: relative;
    top: 90px;
  }
  .desctime{
    text-align: left;
    width: 1000px;
    height: 400px;
  }
  .openingTimes{
    position: relative;
    font-size: 10px;
    top: 120px;
    width:400px;
    left: 19px;
  }
  .aboutUs{
    position: relative;
    top: 150px;
    background-color: white;
    
    display: inline-block;
    box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
    width: 390px;
    left: 20px;
    height: 900px;
  }
  .aboutusContainer2{
    position: relative;
    bottom: 430px;
    
    background-color: white;
    display: flex;
    box-shadow:5px 4px 0 2px  #C20D0D, 6px 3px 6px 2px black;
    height: 100px;
    text-align: center;
    width: 400px;
    left: 17px;
  }
  .socialIconsContainer{
    display: none;
  }
  .socialDetailsContainer{
    width: 400px;
  }
  .locationIcon{
    
    width: 20px;
    height: 20px;
    border: black 5px solid;
    scale: 2;
    color: black;
    display: block;
  }
  .facebookIcon{
    position: absolute;
    
  }
  .instragramIcon{
    position: absolute;
    
    
  }
  .UserInputDetails{
    background-color: white;
    display: flex;
    
    float: left;
  }
  .nameEmail{
    float: left;
    flex:50%;
  }
  .serviceDate{
    flex:50%;
  }
  .UserInputDetails{
    position: relative;
    flex-direction: column;
    bottom: 100px;
    width: 400px;
  }
  .userMessage{
    top: 275px;
    width: 400px;
    height: 400px;
  }
  .message{
    position: relative;
    right: 55px;
    width: 325px;
    height: 300px;
    bottom: 300px;
  }
  .titleMessage{
    position: relative;
    right: 270px;
    bottom: 310px;
  }
  .counter{
    position: relative;
    right: 245px;
    bottom: 305px;
  }
  .submitButton{
    position: relative;
    top: 300px;
    width: 400px;
    left: 205px;
  }
  .footer-container{
    position: relative;
    bottom: 0;
    width: auto;
    
    overflow: auto;
    top: 600px;
    height: 100px;
  }
}